import React from "react";
import BoxcTypeOne from "./TodayRecommend/BoxcTypeOne";
import BoxcTypeTow from "./TodayRecommend/BoxcTypeTow";
import BoxcTypeThree from "./TodayRecommend/BoxcTypeThree";
import { ArrowRightOutlined } from "@ant-design/icons";
import "../../../assets/sass/home_page/free_templates/featured_picks/template_one/template_one.css";
import BoxcTypeFour from "./TodayRecommend/BoxcTypeFour";
import BoxcTypeFive from "./TodayRecommend/BoxcTypeFive";

const Template_one = () => {
  const tabList = [
    "精选推荐",
    "热点关注",
    "儿童节",
    "高考加油",
    "端午节",
    "618",
    "父亲节",
  ];
  return (
    <div className="template_one">
      <div className="template_one_top">
        <div className="template_one_title">
          <span className="title">今日推荐</span>
          <span className="title_text">开通会员免费用</span>
        </div>
        <div className="template_one_tab">
          <div className="tab">
            {tabList &&
              tabList.map((item, index) => {
                return (
                  <div className="tab_item" key={index}>
                    {item}
                  </div>
                );
              })}
          </div>
          <span className="look_more">查看更多&gt;</span>
        </div>
      </div>
      <div className="main_right">
        <div className="right_box">
          <BoxcTypeOne></BoxcTypeOne>
          <BoxcTypeTow></BoxcTypeTow>
          <BoxcTypeThree></BoxcTypeThree>
          <BoxcTypeFour></BoxcTypeFour>
          <BoxcTypeFive></BoxcTypeFive>
          <BoxcTypeOne></BoxcTypeOne>
          <BoxcTypeTow></BoxcTypeTow>
          <BoxcTypeThree></BoxcTypeThree>
          <BoxcTypeFour></BoxcTypeFour>
          <BoxcTypeFive></BoxcTypeFive>
          <BoxcTypeOne></BoxcTypeOne>
          <BoxcTypeTow></BoxcTypeTow>
          <div className="look_more">
            <div className="look_box">
              <div className="arrow">
                <ArrowRightOutlined />
              </div>
              <div className="look_text">查看更多</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Template_one;
